{% extends "layout.html" %}

{% block left %}
<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
    <li><a href="/line">24小时访问趋势</a></li>
    <li><a href="/bar">每日访问情况</a></li>
    <li><a href="/pie">客户端设备占比</a></li>
    <li><a href="/china">用户分布</a></li>
    <li class="active"><a href="/wordcloud">爬虫词云</a></li>
  </ul>
</div>
{% endblock %}        
        
{% block right %}
<!--右边展示-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  <h1 class="page-header">{{title}}</h1>

  <div class="row placeholders">
        <!--展示区-->
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="col-xs-12 col-sm-8 col-lg-10 placeholder" style="height:500px;" id="main">

    </div>

  </div>
</div>
{% endblock %}

{% block echarts_js %}
<script src="/static/js/echarts.min.js" charset="utf-8"></script>
<script src="/static/js/echarts-wordcloud.min.js" charset="utf-8"></script>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
          title:{
          },
          tooltip: {},
          series: [{
              type: 'wordCloud',
              gridSize: 20,
              sizeRange: [30, 80],
              rotationRange: [0, 0],
              shape: 'pentagon',
              textStyle: {
                  normal: {
                      color: function() {
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  emphasis: {
                      shadowBlur: 10,
                      shadowColor: '#333'
                  }
              },
              data: {{data|safe}}
          }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
</script>        
{% endblock %}